<template>
	<e-charts class="chart2" :option="option" />
	<e-charts class="chart1" :option="option1" />
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';

	import {
		userPlace,
		elevatorBrand,
		elevatorAge
	} from '@/api'
	let option = ref({});
	let option1 = ref({});
	const username = ref('')
	const left21 = () => {
		
		userPlace(username.value).then(r => {
			console.log(r)
			const pieData = Object.entries(r.data.单个参数).map(([name, value]) => ({
				name,
				value
			}));
			option.value = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'horizontal', // 关键修改：水平排列
					top: 'top', // 放在顶部
					left: 'center', // 水平居中
					textStyle: {
						color: '#ffffff',
						fontSize: 13,
						fontWeight: 'bold'
					},
					itemWidth: 10, // 图例标记的宽度（可选）
					itemHeight: 4, // 图例标记的高度（可选）
					itemGap: 1 // 图例项之间的间隔（可选）
				},
				series: [{
					name: '电梯分布',
					type: 'pie',
					radius: '50%',
					center: ['50%', '55%'], // 调整饼图位置（避免与图例重叠）
					data: pieData,
					label: {
						color: '#ffffff',
						fontSize: 14,
						fontWeight: 'bold',
						fontFamily: 'Arial'
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
		})
	}
	const left22 = () => {
		elevatorBrand(username.value).then(r => {
			 
			const brands = Object.keys(r.data);
			const values = Object.values(r.data)
			option1.value = {
				title: {
					text: '电梯品牌分布',
					left: 'center',
					textStyle: {
						color: '#ffffff',
						fontSize: 22
					}
				},

				xAxis: {
					type: 'category',
					data: brands,
					axisLabel: {
						interval: 0, // 强制显示所有标签
						color: '#ffffff',
						fontSize: 12,
						rotate: 30, // 标签旋转30度（可选）
						width: 80, // 标签最大宽度（可选）
						overflow: 'truncate' // 超出时显示省略号（可选）
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						color: '#ffffff' // y轴文字颜色
					}
				},
				series: [{
					data: values, // 使用转换后的数值
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(72, 180, 132, 0.2)'
					},
					label: { // 柱顶文字标签
						show: true,
						color: '#fc5858', // 文字颜色
						fontSize: 14, // 文字大小
						fontWeight: 'bold', // 文字粗细
						position: 'top', // 显示位置(top/inside/right等)
						formatter: '{c}' // 显示内容格式（{c}代表数值）
					},
					itemStyle: { // 柱子样式
						color: '#7180df',
						borderRadius: [4, 4, 0, 0] // 圆角效果
					}
				}]
			}
		})
	}

	onMounted(() => {
		username.value = localStorage.getItem('username')
		left21()
		left22()
	})
</script>

<style scoped>
	.chart1 {
		margin: 20px 0;
		height: 360px;
		width: 430px;
		align-items: center;
		/* background-color: pink; */
	}

	.chart2 {
		margin: 20px 0;
		height: 460px;
		width: 430px;
		align-items: center;
		/* background-color: pink; */
	}
</style>